<!--
 - Author : wang885298.
 - Date   : 2019/5/21.
 - File   : relateOrg.机构关联
 -->

<template>
  <div class="relateWrap">
    <!--选择菜单-->
    <div class="bar" v-if="state==='0'">
      <el-row>
        <!--<el-col :span="6">机构id：-->
        <!--<el-input class="w65" v-model="orgId" clearable></el-input>-->
        <!--</el-col>-->
        <el-col :span="8">机构名称关键字：
          <el-input class="w65" v-model="orgName" clearable placeholder="请输入机构名称"></el-input>
        </el-col>
        <el-col :span="10">
          <el-button class="search-btn" type="primary" round @click="getOrgAllList()">搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <!--结果表格-->
    <div class="relate-table" v-if="state==='0'">
      <el-table
        ref="multipleTable"
        :data="tableList"
        tooltip-effect="dark"
        style="width: 100%">
        <el-table-column
          width="35">
        </el-table-column>
        <el-table-column
          label="机构ID"
          width="500"
          show-overflow-tooltip>
          <template slot-scope="scope">{{ scope.row.orgId }}</template>
        </el-table-column>
        <el-table-column
          prop="orgName"
          label="机构名称">
        </el-table-column>
        <el-table-column
          label="操作"
          align="center">
          <template slot-scope="scope">
            <span class="cur l-green" @click="relate(scope.row)">选择关联</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--已关联机构-->
    <div v-if="state==='1'">
      <div class="relateTitle">已关联机构</div>
      <div class="related" v-for="(build,num) in existTableList" :key="num">
        <div class="related-left">
          <div class="related-left-item">
            机构名称<span>{{build.orgName}}</span>
          </div>
          <div class="related-left-item">
            机构ID<span>{{build.orgId}}</span>
          </div>
        </div>
        <div class="related-right">
          <span @click="cancel">取消关联</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        state: this.$route.query.relationData ? '1' : '0',
        orgName: null,
        orgId: this.$route.query.relationData || '',
        type: this.$route.query.type,
        tableTitle: {
          name1: '',
          name2: ''
        },
        tableList: [],
        existOrgIdList: [],
        existTableList: []
      }
    },
    mounted() {
      window.websocket.onopen = (e) => {
        if (e.type === 'open') {
          window.websocket.send(JSON.stringify({type: 'org'}))
        }
      }
      window.websocket.onmessage = (e) => {
        e = JSON.parse(e.data)
        if (e.type === 'org') {
          this.existOrgIdList = e.Id
        }
      }
      this.getOrgAllList()
    },
    watch: {
      existOrgIdList(cur) {
        this.tableList = this.tableList.filter(v => {
          if (cur.indexOf(v.orgId) < 0) {
            return v
          }
        })
      }
    },
    methods: {
      /**
       * 获取组织列表
       * @author wang885298
       * @createTime 2019/05/20
       */
      getOrgAllList() {
        this.orgName = (this.orgName === '') ? null : this.orgName
        let params = {
          orgName: this.orgName
        }
        this.$request.orgAllListGet(params).then(res => {
          console.log('getOrgAllList', res)
          this.tableList = res
          this.existTableList = this.tableList.filter(v => {
            if (v.orgId === this.orgId) {
              return v
            }
          })
          // this.tableList.map((val, index) => {
          //   this.$set(this.tableList[index], 'normalId', val.orgId)
          //   this.$set(this.tableList[index], 'normalName', val.orgName)
          // })
        })
      },
      /**
       * 关联
       * @author: zhzhy
       * @createDate: 2019/5/22
       * @param {String}
       * @return {Object}
       */
      relate(item) {
        window.websocket.send(JSON.stringify({state: '01', relationData: item.orgId, success: true}))
        this.state = '1'
        this.existTableList.push(item)
      },
      /**
       * 取消关联
       * @author: zhzhy
       * @createDate: 2019/5/22
       * @param {String}
       * @return {Object}
       */
      cancel() {
        this.$confirm('是否确认取消当前机构关联？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          window.websocket.send(JSON.stringify({state: '02', relationData: '', success: true}))
          this.existTableList = []
          this.state = '0'
        }).catch(() => {
        })
      }
    }
  }
</script>

<style ref="stylesheet/less" lang="less">
  .relateWrap {
    background: #212d3f;
    height: 100%;
    overflow: auto;
    padding: 30px 20px;
    box-sizing: border-box;
    /*工具栏样式*/

    .bar {
      color: #fff;
      font-size: 16px;

      .w65 {
        width: 65%;
      }

      .search-btn {
        font-size: 16px;
        padding: 10px 45px;
        background: -webkit-linear-gradient(left, #088eec, #17b3e7) !important;
        background: -o-linear-gradient(right, #088eec, #17b3e7) !important;
        background: -moz-linear-gradient(right, #088eec, #17b3e7) !important;
        background: linear-gradient(to right, #088eec, #17b3e7) !important;
      }
    }

    /*表格重写样式*/

    .relate-table {
      margin-top: 30px;

      .el-table {
        color: #fff !important;
        font-size: 15px;
      }

      .el-table tbody th, .el-table tbody tr {
        background: #1b2d40 !important;
      }

      .el-table td, .el-table th.is-leaf {
        border-bottom: 1px solid #ebeef554 !important;
      }

      .el-table td, .el-table th {
        padding: 20px 0 !important;
      }

      .el-table--border::after, .el-table--group::after, .el-table::before {
        background-color: #ebeef514 !important;
      }

      .el-table--enable-row-hover .el-table__body tr:hover > td {
        background-color: #0b2843;
        color: #fff;
      }

      .el-table thead tr {
        background: linear-gradient(to right, #088eec, #17b3e7) !important;
      }

      .el-table thead th {
        background: none !important;
        color: #fff !important;
        font-size: 16px !important;
      }

      .el-table__empty-block {
        background: #1b2d40 !important;
      }
    }

    .cur {
      cursor: pointer;
    }

    .cur:hover {
      opacity: 0.8;
    }

    .l-green {
      color: #00ffff;
      padding: 0 2px;
    }

    .cancel-btn {
      color: #ffd005;
    }

    /*分页重写样式*/

    .relate-page {
      text-align: right;
      margin-top: 25px;

      .el-pager li {
        background: transparent;
        color: #657b8d;
        min-width: 0;
        margin: 0 3px;
      }

      .el-pagination .btn-next, .el-pagination .btn-prev {
        padding-right: 5px;
        background-color: transparent;
        color: #657b8d;
      }

      .el-input__inner {
        border-color: #657b8d;
        background-color: transparent;
        width: 80%;
        height: 20px;
        color: #657b8d;
        border-radius: 0;
      }

      .el-pagination__jump {
        color: #657b8d;
      }

      .el-pager li.active {
        color: #00ffff;
        border-bottom: 1px solid #00ffff;
      }

      .btn-prev .el-icon-arrow-left:before {
        content: '\4E0A\4E00\9875';
      }

      .btn-next .el-icon-arrow-right:before {
        content: '\4E0B\4E00\9875';
      }
    }

    /*已关联楼栋样式*/

    .relateTitle {
      color: #fff;
      font-size: 20px;
      position: relative;
      padding: 0 6px;

      &:before {
        position: absolute;
        left: -7px;
        top: 1px;
        content: '';
        width: 4px;
        height: 26px;
        margin-right: 5px;
        background: #38b5ee;
      }
    }

    .related {
      margin: 20px 0;
      display: flex;
      /*justify-content: space-between;*/
      color: #fff;
      font-size: 16px;
      align-items: center;

      &-left {
        display: flex;
        width: 70%;

        &-item {
          /*margin-right: 55px;*/
          color: #00f1ff;

          span {
            margin-left: 8px;
            font-size: 20px;
            color: #fff;
          }
        }

        &-item:first-child {
          flex: 6;
        }
      }

      &-right {
        margin-left: 80px;

        span {
          display: inline-block;
          border-radius: 25px;
          background: linear-gradient(to right, #088eec, #17b3e7);
          padding: 10px;
          color: #fff;
          width: 144px;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
</style>
